<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #box1 {
            width: 500px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        
        #box2 {
            background-color: black;
            width: 100px;
            height: 100px;
            margin: 10px auto;
        }
    </style>


</head>

<body>
    <form id="box1">
        <input type="button" value="变宽" onclick="c_width()" />
        <input type="button" value="变高" onclick="c_height()" />
        <input type="button" value="变色" onclick="c_color()" />
        <input type="button" value="隐藏" onclick="c_hide()" />
        <input type="button" value="重置" onclick="c_reset()" />
        <div id="box2"></div>
    </form>
    <script type="text/javascript">
        var c_b = document.getElementById("box2");

        function c_width() {
            c_b.style.width = "200px";
        }

        function c_height() {
            c_b.style.height = "200px";
        }

        function c_color() {
            c_b.style.backgroundColor = "red";
        }

        function c_hide() {
            c_b.style.visibility = "hidden";
        }

        function c_reset() {
            c_b.style.cssText = "background-color: black; width: 100px; height: 100px;";
        }
    </script>
</body>

</html>